---
title: 'Notiolink'
description: 'Self-hostable branded link shortener built with Next.js & Notion API'
category: 'Personal Project'
publishedAt: '2022-07-23'
techs: 'nextjs,tailwindcss,notion'
banner: 'projects/notiolink/notiolink_bjtkm5.png'
github: 'https://github.com/theodorusclarence/notiolink'
link: 'https://notiolink.thcl.dev'
---

> ## Short Explanation

Notiolink is a self-hostable link shortener built with Next.js & Notion API. It's a simple and easy-to-deploy shortener that's using Notion as a CMS.

Some features including:

- ⚡ Unlimited branded links (use your own domain!)
- ☝ Self-hostable with Vercel
- 💨 Fast redirect using Next.js Middleware Functions
- 🌑 Awesome CMS using Notion
- ➕ See click count statistics
- 💠 Zero config, all customizable via env
- 💅 Numerous themes

> ## Project Goals

I did this project originally for my personal use. Shortening links is easier for me to remember than having to search through numerous bookmarks. I can just pick a short slug—which usually is not an option when you are using a free service—and remember it.

<blockquote className='with-icons'>
  ## Tech Stack Used
  <div className='not-prose mt-2'>
    <TechIcons techs={['nextjs', 'tailwindcss', 'notion']} />
  </div>
</blockquote>

Notiolink is a full-stack application built using Next.js and Notion API. I chose notion because of the easy-to-use UI. All links are served as a table inside the notion and can be edited whenever you want.

> ## Features

### Notion CMS

All links are customizable via notion

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/notion-table_br6ebb'
  alt='notion-table'
  width={1339}
  height={875}
/>

### Link Tree Page

You can easily configure it on the notion database

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/linktree_kbtwts'
  alt='linktree'
  width={605}
  height={706}
/>

### Add New Link

Route: `/new`

You can add link straight from the website for easy access, don't worry **this is protected with login page** so no one will mess with your links

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/shorten-new-link_tkinse'
  alt='shorten-new-link'
  width={632}
  height={567}
/>

### Link Details & Count

You can see the statistics with `/:slug/detail` route

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/link-details-and-count_ae7x2e'
  alt='link-details-and-count'
  width={682}
  height={672}
/>

### Categorized Tree

Every category will be made into a standalone tree on `/c/:category` route

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/categorized-tree_aeottm'
  alt='categorized-tree'
  width={567}
  height={563}
/>

### Themes

Themes you can choose

<small>Pro tip: click the image to make it full screen</small>

<SplitImage>
  <Split>
    <div className='not-prose space-y-2'>
      <CloudinaryImg
        mdx
        publicId='theodorusclarence/projects/notiolink/theme-dark_sspfwt'
        alt='theme-dark'
        width={648}
        height={622}
      />
      <p className='text-center text-sm font-medium'>Dark</p>
    </div>
    <div className='not-prose space-y-2'>
      <CloudinaryImg
        mdx
        publicId='theodorusclarence/projects/notiolink/theme-street_nx7i4f'
        alt='theme-street'
        width={648}
        height={622}
      />
      <p className='text-center text-sm font-medium'>Street</p>
    </div>
    <div className='not-prose space-y-2'>
      <CloudinaryImg
        mdx
        publicId='theodorusclarence/projects/notiolink/theme-milky_z60zsu'
        alt='theme-milky'
        width={648}
        height={622}
      />
      <p className='text-center text-sm font-medium'>Milky</p>
    </div>
  </Split>
  <Split>
    <div className='not-prose space-y-2'>
      <CloudinaryImg
        mdx
        publicId='theodorusclarence/projects/notiolink/theme-light_pmkjnq'
        alt='theme-light'
        width={648}
        height={622}
      />
      <p className='text-center text-sm font-medium'>Light</p>
    </div>
    <div className='not-prose space-y-2'>
      <CloudinaryImg
        mdx
        publicId='theodorusclarence/projects/notiolink/theme-monokai_ndz8rx'
        alt='theme-monokai'
        width={648}
        height={622}
      />
      <p className='text-center text-sm font-medium'>Monokai</p>
    </div>
  </Split>
</SplitImage>

> ## Spotlight

### Creating An Easy To Deploy App

I aim for this project to be easy to fork and deploy. Therefore, every configuration is done via environment variables.

### Installation Guide

I made an [installation guide](https://www.notion.so/Notiolink-Installation-Guide-3d038711cd5141109f56137d0195aad0) that is easy for people to follow. Even non-developers can do it too!

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/notiolink-installation-guide_hcgett'
  alt='notiolink-installation-guide'
  width={785}
  height={645}
/>

### Launching on ProductHunt

I launched the app on [ProductHunt](https://www.producthunt.com/products/notiolink), and the review is quite positive!

<CloudinaryImg
  mdx
  publicId='theodorusclarence/projects/notiolink/producthunt_boyaq5'
  alt='producthunt'
  width={449}
  height={344}
/>

> ## The Problems and How I Deal With It

Optimizing the repository so it is fairly customizable is hard. I created some features which users can customize and have to account for whether the feature will be hard to implement or set up. However, it was a thought-provoking activity that I enjoyed.

> ## Try it out!

Deploy one of your own!

<GithubCard repo='theodorusclarence/notiolink' />
